<template>
  <div class="sayinglist">
    <div class="list-container">
      <div class="file-div">
        <div class="file-res">
          <div class="file-res-item" v-for="file in files" @click="onFileClick(file)">
            <el-skeleton :loading="user.resources[file] == undefined" :rows="0" animated>
              <div class="file-name">{{ user.resources[file].name.substring(0, user.resources[file].name.lastIndexOf(".")) }}</div>
              <div class="download-text">（点击下载 翻译版PDF原文）</div>
            </el-skeleton>
          </div>
        </div>
      </div>
      <div class="list-content">
        <div class="list-title" @click="linkTo(props.data.url)" :class="{ link: props.data.url.length > 0 }">
          &emsp;&emsp;{{ props.data.content }}
        </div>
      </div>
    </div>
    <div class="time">{{ getTime(props.data.createAt) }}</div>
    <div class="list-line"></div>
  </div>
</template>

<script setup lang="ts">
import convertTime from '@/api/convertTime'
import downloadFile from '@/api/downloadFile'
import resInformation from '@/api/resInformation'

import { reactive } from 'vue';
import { userinfo } from '@/stores/counter'

const { download } = downloadFile()
const { getResourceInfo } = resInformation()

const onFileClick = async (id: string) => {
  if (user.resources[parseInt(id)] == undefined) return
  // const blob = await download(id)
  // const url = window.URL.createObjectURL(blob)
  // const url = window.URL.createObjectURL(blob)
  const url = user.resources[parseInt(id)].fileUrl
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', user.resources[parseInt(id)].name)  // 这里可以设置下载文件的默认名字
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
const linkTo = (url: string) => {
  if (url.length == 0) return
  // 判断 url 是不是 http / https 开头
  if (!url.startsWith('http')) {
    url = 'http://' + url
  }
  window.open(url)
}

const user = userinfo()
const { getTime } = convertTime()

const props = defineProps({
  data: {
    type: Object,
    default: () => { }
  }
})

const files = reactive(props.data.resId.length > 0 ? props.data.resId.split(',') : [])

for (let i = 0; i < files.length; i++) {
  getResourceInfo(files[i])
}

</script>

<style scoped>
.link {
  cursor: pointer;
}

.link::after {
  content: '  (查看原文)';
  color: #fa7c0a;
}

.file-res-item {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 100%;
  flex-direction: column;
}

.file-404 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.file-res {
  padding:0 10px;
  gap: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.file-title {
  font-size: 18px;
  font-weight: 600;
  align-self: center;
}

.list-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 95%;
  margin: 20px 0 5px;
}

.file-div {
  display: flex;
  flex-direction: column;
  width: 30%;
}

.sayinglist {
  width: 70vw;
  min-width: 1200px;
  min-height: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.avatar {
  background-image: url(/assets/imgs/avatar.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 120px;
  height: 120px;
  border-radius: 100%;
}

.list-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex: 1;
  line-height: 30px;
  width: 70%;
}

.list-title {
  font-weight: 400;
  font-size: 18px;
}

.list-line {
  height: 2px;
  width: 100%;
  background-color: #f2ac1c;
}

.time {
  font-size: 10px;
  color: #cfcccd;
  align-self: flex-end;
  margin-bottom: 15px;
  margin-right: 2.5%;
}

.file-name {
  font-size: 18px;
  font-style: italic;
}

.download-text {
  color: #fa7c0a;
}
</style>
